<script lang='ts' setup>
import { reactive, ref, watch, nextTick, onMounted } from 'vue';
import UserRoleList from './user-role-list.vue';
import DeptRoleList from './dept-role-list.vue';
import userGroupRoleServiceApi from '/@/api/org/bean/user-group-role';
import { ElMessage } from 'element-plus'

const UserRoleListRef = ref()
const DeptRoleListRef = ref()
const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'ok', val: any[]): void
}
>()

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    userDeptId: {
        type: String,
        default: ''
    }
})
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})

const UserRoleListDialogState = reactive({
    queryParam: { unitId: '10000' },
    handleClose: () => {
        visibleModelValue.value = false
    },

    /**
     * 选择用户角色checkout
     */
    handleUserRole: (data: any) => {
        data.userDeptId = props.userDeptId
        userGroupRoleServiceApi.toggleUserDeptRole(data).then((res: any) => {
            if (res.data.success) {
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })
                UserRoleListRef.value.getUserRoleListTableRef().loadTable();
            }
        })
    },
    onTabClick: (val: any) => {
        if (val.props.label == '用户角色列表') {
            UserRoleListRef.value.getUserRoleListTableRef().loadTable();
        } else {
            DeptRoleListRef.value.getDeptRoleListTableRef().loadTable();
        }
    }
})

onMounted(() => {
    nextTick(() => {
        UserRoleListRef.value.getUserRoleListTableRef().loadTable();
    })

})

</script>
<template>
    <div class="jxtech-dialog-form">
        <el-dialog
            v-model="visibleModelValue"
            title="用户角色"
            width="80%"
            destroy-on-close
            :before-close="UserRoleListDialogState.handleClose"
        >
            <el-tabs type="border-card" @tabClick="UserRoleListDialogState.onTabClick">
                <el-tab-pane label="用户角色列表">
                    <user-role-list
                        v-if="visibleModelValue"
                        ref="UserRoleListRef"
                        :user-dept-id="userDeptId"
                        @change="UserRoleListDialogState.handleUserRole"
                    ></user-role-list>
                </el-tab-pane>
                <el-tab-pane label="部门角色列表">
                    <dept-role-list
                        v-if="visibleModelValue"
                        ref="DeptRoleListRef"
                        :user-dept-id="userDeptId"
                    ></dept-role-list>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>